{# Stalker Pyramid a Web Base Production Asset Management System
 Copyright (C) 2009-2014 Erkan Ozgur Yilmaz
 
 This file is part of Stalker Pyramid.
 
 This library is free software; you can redistribute it and/or
 modify it under the terms of the GNU Lesser General Public
 License as published by the Free Software Foundation;
 version 2.1 of the License.

 This library is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 Lesser General Public License for more details.

 You should have received a copy of the GNU Lesser General Public
 License along with this library; if not, write to the Free Software
 Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
#}
{% extends 'base.jinja2' %}

{# PRE-HEADER #}
{% block pre_header %}
    <link rel="stylesheet" href='{{ request.static_url("stalker_pyramid:static/ace/css/chosen.min.css") }}' />
    <link rel="stylesheet" href='{{ request.static_url("stalker_pyramid:static/ace/css/datepicker.css") }}' />
    <link rel="stylesheet" href='{{ request.static_url("stalker_pyramid:static/ace/css/bootstrap-timepicker.css") }}' />
    <link rel="stylesheet" href='{{ request.static_url("stalker_pyramid:static/ace/css/daterangepicker.css") }}' />
    <link rel="stylesheet" href='{{ request.static_url("stalker_pyramid:static/ace/css/colorpicker.css") }}' />
{% endblock pre_header %}

{# PAGE-CONTENT #}
{% block page_content %}
    {% set project=entity %}
    {# Project Dialog #}
    <div class="page-header position-relative">
        <h1>{{ mode.title() }} Project</h1>
    </div>

    <div class='row-fluid'>
        <div class='span12'>
            <form id='project_form'
                  class='form-horizontal'
                  role='form'
                  method="post"
                  action="{{ request.route_url('create_project') }}">

                {# Thumbnail #}
                <div class='control-group'>
                    <label for='thumbnail' class='span2 control-label'>Thumbnail</label>

                    <div class='span3'>
                        <input id='thumbnail' name='thumbnail' type="file">
                    </div>
                </div>

                {# Name #}
                <div class="control-group">
                    <label class="span2 control-label" for="project_name">Name</label>
                    <div class="span10">
                        <input id="project_name"
                               name='name'
                               type="text"
                               class="form-control"
                               placeholder="Name"
                               required>
                    </div>
                </div>

                {# Code #}
                <div class="control-group">
                    <label for="project_code" class="span2 control-label">Code</label>
                    <div class="span10">
                        <input id="project_code"
                               name='code'
                               type="text"
                               class="form-control"
                               placeholder="Code"
                               required>
                    </div>
                </div>

                {# Start & End Dates #}
                <div class="control-group">
                    <label for="start_end_date_range_picker" class="span2 control-label">Date</label>
                    <div class="span10 input-prepend">
                        <input id='start_end_date_range_picker'
                               name='start_and_end_dates'
                               type="text"
                               data-date-format="yyyy-mm-dd"
                               placeholder="Start & End Dates">
                        <span class="add-on">
                            <i class="icon-calendar"></i>
                        </span>
                    </div>
                </div>

                {# Image Format #}
                <div class="control-group">
                    <label for='image_format' class="span2 control-label">Image Format</label>
                    <div class="span10">
                        <select id='image_format'
                                name='image_format_id'
                                data-placeholder='Image Format'
                                required>
                        </select>
                    </div>
                </div>

                {# FPS #}
                <div class='control-group'>
                    <label for='fps' class='span2 control-label'>FPS</label>
                    <div class='span10'>
                        <input id='fps'
                               name='fps'
                               type='text'
                               placeholder='FPS'
                               value=25
                               min=1
                               required>
                    </div>
                </div>

                {# Repository #}
                <div class="control-group">
                    <label for='repository' class="span2 control-label">Repository</label>
                    <div class="span10">
                        <select id='repository'
                                name='repository_id'
                                data-placeholder='Repository'
                                required>
                        </select>
                    </div>
                </div>

                {# Structure #}
                <div class="control-group">
                    <label for='structure' class="span2 control-label">Structure</label>
                    <div class="span10">
                        <select id='structure'
                                name='structure_id'
                                data-placeholder='Structure'
                                required>
                        </select>
                    </div>
                </div>

                {# Lead #}
                <div class="control-group">
                    <label for='lead' class="span2 control-label">Lead</label>
                    <div class="span10">
                        <select id='lead'
                                name='lead_id'
                                data-placeholder='Lead'
                                required>
                        </select>
                    </div>
                </div>

                <input type='hidden' name='came_from' value='{{ came_from }}'>

                {# Form Buttons #}
                <div class="form-actions">
                    <button type="submit" class="btn btn-info btn-primary">
                        <i class="icon-ok"></i>Ok
                    </button>
                    <button type="button" class="btn">
                        <i class="icon-remove"></i>Cancel
                    </button>
                </div>
        
            </form>
        </div>
    </div>
    
{% endblock page_content %}


{# EXTRA-SCRIPTS #}
{% block extrascripts %}
    <script src='{{ request.static_url("stalker_pyramid:static/ace/js/chosen.jquery.min.js") }}'></script>
    <script src='{{ request.static_url("stalker_pyramid:static/ace/js/date-time/bootstrap-datepicker.min.js") }}'></script>
    <script src='{{ request.static_url("stalker_pyramid:static/ace/js/date-time/moment.min.js") }}'></script>
    <script src='{{ request.static_url("stalker_pyramid:static/ace/js/date-time/daterangepicker.min.js") }}'></script>
    <script src='{{ request.static_url("stalker_pyramid:static/ace/js/bootstrap-colorpicker.min.js") }}'></script>
    <script src='{{ request.static_url("stalker_pyramid:static/ace/js/jquery.autosize-min.js") }}'></script>
    <script src='{{ request.static_url("stalker_pyramid:static/ace/js/jquery.inputlimiter.1.3.1.min.js") }}'></script>
    <script src='{{ request.static_url("stalker_pyramid:static/ace/js/jquery.maskedinput.min.js") }}'></script>
    <script src='{{ request.static_url("stalker_pyramid:static/ace/js/bootstrap-tag.min.js") }}'></script>
    <script src='{{ request.static_url("stalker_pyramid:static/ace/js/jquery.validate.min.js") }}'></script>
    <script src='{{ request.static_url("stalker_pyramid:static/ace/js/additional-methods.min.js") }}'></script>
    <script src='{{ request.static_url("stalker_pyramid:static/ace/js/fuelux/fuelux.spinner.min.js") }}'></script>


    <script type="text/javascript">
        {# Update info #}
        {% if mode == 'update' %}
            lead_id = {{ project.lead.id }};
        {% endif %}


        {# Update Name and code #}
        {% if mode == 'update' %}
            $(document).ready(function() {
                $('#project_name').val('{{ project.name }}');
                $('#project_code').val('{{ project.code }}');
            });
        {% endif %}



        {# Start & End Date Picker #}
        $(document).ready(function(){
            // initialize date picker
            var start_end_date_range_picker = $('#start_end_date_range_picker').daterangepicker();

            // also update the icon
            start_end_date_range_picker.next().on(ace.click_event, function () {
                $(this).prev().focus();
            });

            // fix z-index of the container
            start_end_date_range_picker.data().daterangepicker.container.css({'z-index': 1060});

            // fill data if mode is update
            {% if mode == 'update' %}
                var start_date = new Date({{ milliseconds_since_epoch(project.start) }});
                var end_date = new Date({{ milliseconds_since_epoch(project.end) }});
                start_end_date_range_picker.val(
                    start_date.format('mm/dd/yyyy') + ' - ' + end_date.format('mm/dd/yyyy')
                );
                start_end_date_range_picker.data().daterangepicker.updateFromControl();
            {% endif %}
        });




        {# FPS #}
        $(document).ready(function(){
            {# FPS Spinner #}
            var fps = 25;
            {% if mode == 'update' %}
                fps = {{ project.fps }};
            {% endif %}

            $('#fps').ace_spinner({
                value: fps,
                min: 1,
                step: 1,
                btn_up_class: 'btn-info',
                btn_down_class: 'btn-info'
            });
        });


        {# Image Format #}
        $(document).ready(function(){
            {% raw %}
            var image_format_option_template = doT.template(
                '<option value={{=it.id}}>{{=it.name}} ({{=it.width}} x {{=it.height}} x {{=it.pixel_aspect}})</option>'
            );
            {% endraw %}
            var image_format = $('#image_format');
            var deferred = chosen_field_creator(image_format, '/image_formats/', image_format_option_template);
            
            var image_format_id;
            {% if mode == 'update' %}
                image_format_id = {{ project.image_format.id }};
                deferred.then(function(){
                    image_format.val(image_format_id).trigger('liszt:updated');
                });
            {% endif %}
        });




        {# Repository #}
        $(document).ready(function(){
            {% raw %}
            var repository_option_template = doT.template(
                '<option value={{=it.id}}>{{=it.name}}</option>'
            );
            {% endraw %}
            
            var repository = $('#repository');
            var deferred = chosen_field_creator(repository, '/repositories/', repository_option_template);
            {% if mode == 'update' %}
                var repository_id = {{ project.repository.id }};
                deferred.then(function(){
                    repository.val(repository_id).trigger('liszt:updated');
                });
            {% endif %}
        });




        {# Structure #}
        $(document).ready(function(){
            {% raw %}
            var structure_option_template = doT.template(
                '<option value={{=it.id}}>{{=it.name}}</option>'
            );
            {% endraw %}

            var structure = $('#structure');
            var deferred = chosen_field_creator(structure, '/structures/', structure_option_template);
            {% if mode == 'update' %}
                var structure_id = {{ project.structure.id }};
                deferred.then(function(){
                    structure.val(structure_id).trigger('liszt:updated');
                });
            {% endif %}
        });




        {# Lead #}
        $(document).ready(function(){
            {% raw %}
            var lead_option_template = doT.template(
                '<option value={{=it.id}}>{{=it.name}}</option>'
            );
            {% endraw %}
            var lead = $('#lead');
            var deferred = chosen_field_creator(lead, '/users/?simple=true', lead_option_template);
            {% if mode == 'update' %}
                var lead_id = {{ project.lead.id }};
                deferred.then(function() {
                    lead.val(lead_id).trigger('liszt:updated');
                });
            {% endif %}
        });




        {# Thumbnail #}
        $(document).ready(function(){
            $('#thumbnail').ace_file_input({
                style: 'well',
                btn_choose: 'Drop files here or click to choose',
                btn_change: null,
                no_icon: 'icon-cloud-upload',
                droppable: true,
                thumbnail: 'fit'
            });
        });




        {# Form #}
        $(document).ready(function(){

            $('#project_form').validate({
                errorElement: 'span',
                errorClass: 'help-inline',
                focusInvalid: true,
                rules: {
                    email: {
                        required: true,
                        email: true
                    },
                    password: {
                        required: true,
                        minlength: 5
                    },
                    password2: {
                        required: true,
                        minlength: 5,
                        equalTo: "#password"
                    },
                    name: {
                        required: true
                    },
                    code: {
                        required: true
                    },
                    phone: {
                        required: true,
                        phone: 'required'
                    },
                    url: {
                        required: true,
                        url: true
                    },
                    comment: {
                        required: true
                    },
                    state: {
                        required: true
                    },
                    platform: {
                        required: true
                    },
                    subscription: {
                        required: true
                    },
                    gender: 'required',
                    agree: 'required'
                },

                messages: {
                    email: {
                        required: "Please provide a valid email.",
                        email: "Please provide a valid email."
                    },
                    password: {
                        required: "Please specify a password.",
                        minlength: "Please specify a secure password."
                    },
                    subscription: "Please choose at least one option",
                    gender: "Please choose gender",
                    agree: "Please accept our policy"
                },

                invalidHandler: function (event, validator) { //display error alert on form submit
                    $('.alert-error', $('.login-form')).show();
                },

                highlight: function (e) {
                    $(e).closest('.control-group').removeClass('info').addClass('error');
                },

                success: function (e) {
                    $(e).closest('.control-group').removeClass('error').addClass('info');
                    $(e).remove();
                },

                errorPlacement: function (error, element) {
                    if (element.is(':checkbox') || element.is(':radio')) {
                        var controls = element.closest('.controls');
                        if (controls.find(':checkbox,:radio').length > 1) controls.append(error);
                        else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
                    }
                    else if (element.is('.select2')) {
                        error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
                    }
                    else if (element.is('.chosen-select')) {
                        error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
                    }
                    else error.insertAfter(element);
                },

                submitHandler: function (form) {
                    form.submit();
                }

            });
        });

    </script>

{% endblock extrascripts %}
